import { React, useState, useEffect } from 'react';
import './regulator.css';
import '../../../index.css';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import InterIP from '../../../IP/IP';
import { message, Button } from 'antd';


export default function Regulator() {

  const success = () => {
    message.success({
      content: '处理成功',
    });
  };

  const navigate = useNavigate();
  const [regulatorData, setRegulatorData] = useState([]);
  let IP = InterIP().props.children;
  var userID = document.cookie.slice(5);

  useEffect(() => {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selAddress", {
      user_id: userID,
    })
      .then((res) => {
        console.log(res);
        setRegulatorData((regulatorData) => regulatorData = res.data)
      })
  }, []);

  function bjsite(data) {
    return () => {
      navigate('/home/person/sitechange', {
        state: {
          data: data,
        }
      })
    }
  }

  function site_del(k, id) {
    return () => {
      axios.post("http://" + IP + ":3000/user/delAddress", {
        address_id: id,
      })
        .then((res) => {
          console.log(res);
          setRegulatorData((regulatorData) => regulatorData = regulatorData.filter((v, key) => {
            return !(key === k)
          }))
        })
    }
  }

  function site_mo(id, k) {
    return () => {
      axios.post("http://" + IP + ":3000/user/resetAddress", {
        default_address: '0',
        user_id: userID,
      })
        .then((res) => {
          axios.post("http://" + IP + ":3000/user/defaultAddress", {
            default_address: '1',
            address_id: id,
          })
            .then((res) => {
              axios.post("http://" + IP + ":3000/user/selAddress", {
                user_id: userID,
              })
                .then((res) => {
                  setRegulatorData((regulatorData) => regulatorData = res.data)
                })
            })
        })
    }
  }


  return (
    <div id="regulator">
      <div className="regulator_top">地址管理</div>
      <div className="regulator_zeng">
        <Link to="/home/person/augment">{" "}<button>增加新地址</button></Link>
      </div>
      <div className="regulator_main">
        <table cellSpacing="0">
          <thead>
            <tr>
              <th id="shouhuoren">收货人</th>
              <th>所在区域</th>
              <th>街道地址</th>
              <th>联系电话</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {regulatorData.map((data, k) => {
              return (
                <tr key={data.address_id}>
                  <td >{data.consignee}</td>
                  <td>{data.area}</td>
                  <td>{data.street}</td>
                  <td>{data.contact_phone}</td>
                  <td>{data.comment}</td>
                  <td>
                    {data.default_address === '1' ? <Button className="button_tan"><div onClick={bjsite(data)} className='regulator_right_button button_bianji'><span>编辑</span></div></Button> : ''}
                    {data.default_address === '1' ? <Button onClick={success} className="button_tan"><div onClick={site_del(k, data.address_id)} className='regulator_right_button button_shanchu'>删除</div></Button> : ''}
                    {data.default_address === '1' ? <div className='regulator_right_button regulator_modi'>默认地址</div> : ''}


                    {data.default_address === '0' ? <Button className="button_tan"><div onClick={bjsite(data)} className='regulator_right_button button_bianji'><span>编辑</span></div></Button> : ''}
                    {data.default_address === '0' ? <Button onClick={success} className="button_tan"><div onClick={site_del(k, data.address_id)} className='regulator_right_button button_shanchu'>删除</div></Button> : ''}
                    {data.default_address === '0' ? <Button onClick={success} className="button_tan"><div onClick={site_mo(data.address_id, k)} className='regulator_right_button button_moren'>设为默认地址</div></Button> : ''}

                  </td>
                </tr>
              )
            })}

          </tbody>
        </table>

      </div>
    </div >
  )
}
